<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>timepoint</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- Popperjs -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        integrity="sha256-BRqBN7dYgABqtY9Hd4ynE+1slnEw+roEPFzQ7TRRfcg=" crossorigin="anonymous"></script>
    <!-- Tempus Dominus JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/js/tempus-dominus.min.js"
        crossorigin="anonymous"></script>

    <!-- Tempus Dominus Styles -->
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css"
        crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
        crossorigin="anonymous"></script>
    <script type="module" src="/scripts/option.js"></script>
</head>

<body>
    <div class="shadow bg-light">
        <div class="d-flex text-bg-primary">
            <div class="d-inline-block pt-2 mt-3 mb-3 ms-3">
                <i class="bi bi-chevron-left h1" onclick="window.history.back()"></i>
            </div>
            <div class="d-inline-block pt-2 ms-3 mt-3 mb-3">
                <h1 class="h1">TIMEPOINT</h1>
            </div>
            <div class="d-inline-block mt-3 ms-2 mt-3 mb-3">
                <h1 class="h3"><span class="badge rounded-pill bg-danger">996</span></h1>
            </div>
            <div class="d-inline-block ms-auto me-3 pt-2 mt-3 mb-3">
                <i class="bi bi-check2 h1" id="option_btn" onclick="CompleteFunc()"></i>
            </div>
        </div>
    </div>
    <div class="container-fluid bg-light shadow-sm">
        <div class="row border-top border-1 mt-0 mb-0 h5">
            <div class="col">
                <div class="ms-2 mt-2 mb-2">账号</div>
            </div>
            <div class="col border-1">
                <div class="d-flex">
                    <div id="account_name_text" class="ms-auto me-3 mt-2 mb-2">sixiang</div>
                </div>
            </div>
        </div>
        <div id="sign_attendance_time_row" class="row border-top border-5 mt-0 mb-0 clickable" data-bs-toggle="modal"
            data-bs-target="#time_picker">
            <div class="col">
                <div class="ms-2 mt-2 mb-2">考勤时间</div>
            </div>
            <div class="col border-1">
                <div class="d-flex">
                    <div class="ms-auto me-2 mt-2 mb-2"><span id="latest_signin_time_txt">10:00</span> - <span
                            id="earliest_signout_time_txt">19:00</span></div>
                    <div class="bi bi-chevron-right mt-2 mb-2"></div>
                </div>
            </div>
        </div>
        <div id="work_time_row" class="row border-top border-1" data-bs-toggle="modal"
            data-bs-target="#work_time_panel">
            <div class="col">
                <div class="ms-2 mt-2 mb-2">弹性时间</div>
            </div>
            <div class="col border-1">
                <div class="bi bi-chevron-right text-end mt-2 mb-2"></div>
            </div>
        </div>
    </div>
    <div id="time_picker" class="modal ms-5 me-5 mt-5">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="h5 text-center">考勤时间</div>
                    <div class="container mt-3">
                        <div class="row g-3 align-items-center justify-content-center">
                            <div class="col-4">
                                <div class="input-group" id="startTimePicker" data-td-target-input="nearest"
                                    data-td-target-toggle="nearest">
                                    <input id="start_time_input" type="text" class="form-control text-center"
                                        data-td-target="#startTimePicker" placeholder="开始时间" readonly />
                                    <span class="input-group-text" data-td-toggle="datetimepicker"
                                        data-td-target="#startTimePicker">
                                        <i class="bi bi-clock"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="input-group" id="endTimePicker" data-td-target-input="nearest"
                                    data-td-target-toggle="nearest">
                                    <input id="end_time_input" type="text" class="form-control text-center"
                                        data-td-target="#endTimePicker" placeholder="结束时间" readonly />
                                    <span class="input-group-text" data-td-toggle="datetimepicker"
                                        data-td-target="#endTimePicker">
                                        <i class="bi bi-clock"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row align-items-center justify-content-center gx-3 mt-3">
                            <div class="col-auto">
                                <i id="confirm_sign_time_btn" class="btn bi bi-check2 btn-success h4 long-btn"></i>
                            </div>
                            <div class="col-auto">
                                <i id="cancel_sign_time_btn" class="btn bi bi-x btn-secondary h4 long-btn"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="work_time_panel" class="modal ms-5 me-5 mt-5">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="text-center">弹性时间</h5>
                    <div class="container mt-3">
                        <div class="row g-3 align-items-center ms-3">
                            <div class="col-6 text-start">
                                <label for="min_work_time_input" class="col-form-label">最小工作时间</label>
                            </div>
                            <div class="col-3 text-end">
                                <input id="min_work_time_input" type="number" class="form-control text-center"
                                    placeholder="8" min="0" max="24" />
                            </div>
                            <div class="col-auto text-end">
                                <span class="label">小时</span>
                            </div>
                        </div>
                        <div class="row g-3 align-items-center ms-3 mt-1">
                            <div class="col-6 text-start">
                                <label for="earliest_signin_time_input" class="col-form-label">最早签到时间</label>
                            </div>
                            <div class="col-5">
                                <div class="input-group" id="earliest_signin_time_picker" data-td-target-input="nearest"
                                    data-td-target-toggle="nearest">
                                    <input id="earliest_signin_time_input" type="text" class="form-control text-center"
                                        data-td-target="#earliest_signin_time_picker" placeholder="00:00" readonly />
                                    <span class="input-group-text" data-td-toggle="datetimepicker"
                                        data-td-target="#earliest_signin_time_picker">
                                        <i class="bi bi-clock"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row g-3 align-items-center mt-1 ms-3">
                            <div class="col-6 text-start">
                                <label for="latest_signout_time_input" class="col-form-label">最晚签退时间</label>
                            </div>
                            <div class="col-5">
                                <div class="input-group" id="latest_signout_time_picker" data-td-target-input="nearest"
                                    data-td-target-toggle="nearest">
                                    <input id="latest_signout_time_input" type="text" class="form-control text-center"
                                        data-td-target="#latest_signout_time_picker" placeholder="23:59" readonly />
                                    <span class="input-group-text" data-td-toggle="datetimepicker"
                                        data-td-target="#latest_signout_time_picker">
                                        <i class="bi bi-clock"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="row align-items-center justify-content-center gx-3 mt-3">
                            <div class="col-auto">
                                <i id="confirm_work_time_btn" class="btn bi bi-check2 btn-success h4 long-btn"></i>
                            </div>
                            <div class="col-auto">
                                <i id="cancel_work_time_btn" class="btn bi bi-x btn-secondary h4 long-btn"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<style>
    .clickable {
        cursor: pointer;
    }

    .long-btn {
        width: 80px;
        height: 32px;
        justify-content: center;
        align-items: center;
        display: flex;
        font-size: 1.5rem;
    }

    #time_picker {
        display: none;
    }

    .modal-dialog {
        margin-top: 200px;
    }
</style>

</html>